<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的个人中心</title>
<%@include file="/WEB-INF/common/js-css-file.jsp"%>
<link rel="stylesheet" type="text/css"
	href="${appPath}/plugin/swiper/css/swiper.min.css" />
<script src="${appPath}/plugin/swiper/js/swiper.min.js"></script>
<style type="text/css">
body {
	margin: 0;
	background-color: #C7EDCC;
}
h2{	
	  font-family: -webkit-pictograph;
	  font-size:30px;
	  font-style:italic;
	  text-align:center;
    }
    .swiper-container {
	    padding-bottom:40px;
    }
	.swiper-wrapper{
	}
    .swiper-slide {
	    width:978px;
		transition-timing-function:linear;
    }
	@media only screen and (max-width:1200px){
	    .swiper-slide {
	        width:770px;
        }
	}
	@media only screen and (max-width:980px){
	    .swiper-slide {
	        width:471px;
        }
	}
	@media only screen and (max-height:480px){
	    .swiper-slide {
	        width:471px;
        }
	}
	.swiper-slide img{
		width:100%;
		border-radius: 4px;}
	.swiper-slide .title{
		position:absolute;
		transform:rotate(90deg);
		transform-origin:left top;
		left:-3px;
		font-size:11px;
		color: rgb(102, 102, 102);}	
    .swiper-button-next, .swiper-button-prev{
		width:86px;
		height:112px;
		background-size:86px 112px;
		margin-top:-56px;
		outline:none;}
	.swiper-button-next{
		background-image:url(img/cursor-next.png);}
	.swiper-button-prev{
		background-image:url(img/cursor-prev.png);}		
	.swiper-pagination-bullet{
		background:none;
		opacity:1;
		margin:0 6px !important;
		width:9px;
		height:9px;
		position:relative;
		outline:none;
		vertical-align:middle;}
	.swiper-pagination-bullet span{
		width:3px;
		height:3px;
		background:#CCC;
		display:block;
		border-radius:50%;
		margin-top:3px;
		margin-left:3px;
	}
	.swiper-pagination-bullet i{
		background:#000;
		height:1px;
		width:20px;
		position:absolute;
		top:4px;
		transform:scaleX(0);
		transform-origin:left;
		z-index:3;
		transition-timing-function:linear;
		}
	.swiper-pagination-bullet-active span,.swiper-pagination-bullet:hover span{
		width:9px;
		height:9px;
		margin-top:0;
		margin-left:0;
		background:#000;
		position:relative;
		z-index:1;
		}
	.swiper-pagination-bullet-active i{
		animation:middle 6s;
		}
	.swiper-pagination-bullet:first-child.swiper-pagination-bullet-active i{
		animation:first 6s;
		}
	.swiper-pagination-bullet:last-child.swiper-pagination-bullet-active i{
		animation:last 6s;
		}				
	@keyframes first{
	  0% {transform:scaleX(0.5);left:0px;}/*091*/
	  100% {transform:scaleX(1);left:2px;} /*0915*/
	}
	@keyframes last{
	  0% {transform:scaleX(0.7);left:-10px;}/*1090*/
	  20% {transform:scaleX(0.3);left:2px;} /*090*/
	  100% {transform:scaleX(0.3);left:0px;} /*090*/
	}		
	@keyframes middle{
	  0% {transform:scaleX(0.7);left:-10px;}/*1091*/
	  20% {transform:scaleX(0.45);left:2px;}/*092*/
	  100% {transform:scaleX(1);left:2px;} /*0913*/
	}	
</style>
</head>

<body>
	
	<embed id="bgmusic" hidden="true">

	<div class="swiper-container">
		<div class="swiper-wrapper"></div>
		<div class="swiper-pagination"></div>
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>
	<script>
		$(function() {
			$.ajax({
				type : "GET",
				url : "${appPath}/photo/playtypepic",
				data : {
					"pTypeId" : "${ptypeid}"
				},
				async:false, //同步
				success : function(result) {
					$.each(result.content,function(){
						
						var div = $("<div class='swiper-slide'></div>");
						var imgUrl="${appPath}/"+this.pUrl;
						
						var realheight=0;
						var realweight=0;
						var oImg= new Image();
						oImg.src = imgUrl;
						
						realheight=oImg.height/(oImg.height/650);
						realweight=oImg.width/(oImg.height/650);
						
						var img = $("<img style='height: "+realheight+"px;width: "+realweight+"px;' data-src='"+imgUrl+"' data-srcset='"+imgUrl+"' class='swiper-lazy img-responsive'>").append("<div class='swiper-lazy-preloader'></div>");
				        
						div.append(img).appendTo(".swiper-wrapper");
						
						img.on("load",function(){
					        var w = $(this).width();
					        /* alert("原始宽度"+w); */
					        var h = $(this).height();
					       /*  alert("原始高度"+h); */
					        
					        var hbili=h/650;
					        /* alert("比例"+hbili); */
					        
					        var realweight=w/(hbili); 
					        /* alert("显示宽度"+realweight); */
					        
					        var realheight=h/hbili;
					        /* alert("显示高度"+realheight); */
					        
					        img.css({ height: realheight, width: realweight });
					    });
						
					});
				}
			});
			
			var swiper = new Swiper('.swiper-container',{
					
				  navigation: {
				      nextEl: '.swiper-button-next',
				      prevEl: '.swiper-button-prev',
				  },
				  
				  effect : 'coverflow',
				  slidesPerView: 3,
				  centeredSlides: true,	
		  		  autoplay: {
		  			delay: 5000,  
		  			disableOnInteraction: false,
		  			stopOnLastSlide: true,
		  		  },
		  		  speed: 800,
		  		  allowTouchMove: false,
		  		  lazy: {
		  			loadPrevNext: true,
		  			loadPrevNextAmount: 3,
		  		  },
		  		  centeredSlides: true,
		  		  spaceBetween : 50,
		  		  slidesOffsetBefore: 40,
		  		  loop: true,
		  		  slidesPerView : 'auto',
		  		  on: {
		  			slideChangeTransitionEnd: function(){
		  			  this.slides.transition(this.params.autoplay.delay+this.params.speed).transform('translate3d(-60px, 0, 0)');
		  			},
		  			slideChangeTransitionStart: function(){
		  			  this.slides.transition(this.params.speed).transform('translate3d(0, 0, 0)');
		  			},
		  		  },
		  		  pagination: {
		  			el: '.swiper-pagination',
		  			clickable :true,
		  			type : 'progressbar',
		  			renderBullet: function (index, className) {
		                return '<div class="' + className + '"><span></span><i></i></div>';
		              },
		  		  },
	  		});
			
			/* 禁止在窗口尺寸变化时，重新浏览 */
	  		/* window.onresize=function(){
	  		  swiper.update();
	  		} */
		});
		
		/* 窗口尺寸变化自动刷新 */
		$(window).resize(function(){
		    location.reload()
		});
		
		/* 播放音乐 */
		$(function(){
			var mycars=new Array("${appPath}/bgmusic/Nothing To Fear.mp3","${appPath}/bgmusic/Ascended Vibrations.mp3","${appPath}/bgmusic/彩蝶舞夏.mp3","${appPath}/bgmusic/InTime.mp3","${appPath}/bgmusic/Do What You Are Doing.mp3","${appPath}/bgmusic/流动的城市.MP3");
			$("#bgmusic").attr("src",mycars[Math.ceil(Math.random()*6)-1]);
			$("#bgmusic")[0].play();
		});
		
	</script>
</body>
</html>